<div class="main-container" #wrap>
    <div class="main-content">
        <div class="content-top-bar">
            <div class="search-box">
                <nz-form-item class="fileItem">
                    <nz-form-label>年份</nz-form-label>
                        <nz-year-picker
                            [(ngModel)]="year"
                            [nzDisabledDate]="disabledDate"
                            (ngModelChange)="getGridData(true)">
                        </nz-year-picker>
                </nz-form-item>
                <nz-form-item class="fileItem">
                    <nz-form-label>月份</nz-form-label>
                        <nz-select nzAllowClear nzPlaceHolder="月" [(ngModel)]="month" (ngModelChange)="getGridData(true)">
                            <nz-option *ngFor="let item of monthOptions" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                        </nz-select>
                </nz-form-item>
                <button nz-button nzType="default" (click)="reset()">重置</button>
            </div>
            <div class="table-btn-group">
                <button nz-button nzType="primary" (click)="openDetailPage('add')">计划录入</button>
            </div>
        </div>

        <div class="table-content dark-blue-table">
            <nz-table #myTable
                      [nzData]="tableData"
                      nzBordered
                      [nzHideOnSinglePage]="true"
                      nzSize="middle"
                      nzShowSizeChanger
                        [nzFrontPagination]="false"
                        [nzLoading]="loading"
                        [nzTotal]="total"
                        [(nzPageIndex)]="pageNum"
                        [(nzPageSize)]="pageSize"
                        (nzPageIndexChange)="getGridData()"
                        (nzPageSizeChange)="getGridData(true)"
                        >
                <thead>
                <tr>
                    <th style="width:150px">序号</th>
                    <th>计划名称</th>
                    <th style="width:220px">时间</th>
                    <th style="width:220px">创建时间</th>
                    <th style="width:200px">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of myTable.data; let idx = index">
                    <td style="width:150px">{{ idx + 1}}</td>
                    <td>{{data.name}}</td>
                    <td style="width:220px">{{data.cycleName}}</td>
                    <td style="width:220px">{{data.ctDate}}</td>
                    <td style="width:200px">
                        <a (click)="openDetailPage('detail', data.cycle, data.m, data.dataType,data.name)">查看</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a (click)="openDetailPage('edit', data.cycle, data.m, data.dataType,data.name)">修改</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a (click)="exportFile(data)">导出</a>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</div>
